<template>
	<view class="">
		<view class="u-skeleton">
			<!-- 	<view class="u-skeleton-fillet" style="width: 100%;height: 490rpx;">
				<image class="" style="width: 100%;height: 100%;" :src="order.addressImg"></image>
			</view> -->
			<swiper class="swiper" :autoplay="true" interval="2000" duration="500" :circular="true"
				style="width: 100%;height: 400rpx;">
				<swiper-item v-for="(item,index) in order.addressImg" :key='index'
					@click="saveImg(order.addressImg, index)">
					<image :src="item" mode="aspectFill" style="width: 100%;"></image>
				</swiper-item>
			</swiper>
			<view class="padding-sm bgs u-skeleton-fillet">
				<view class="padding bg radius ">
					<view class="flex align-end margin-top-sm">
						<view style="color: #000000;font-size: 34upx;" class="text-bold">{{order.shopName}}
						</view>
						<view class="margin-left-sm" @click="goTousu(order.userId)">
							<image src="../../../static/images/index/tousu.png" mode="widthFix"
								style="width: 33rpx;height: 35rpx;"></image>
						</view>
					</view>
					<view class="flex margin-top-xs">
						<view class="flex align-center" @tap="bindGps(order.latitude,order.longitude,order.address)">
							<image src="../../../static/images/my/address.png" style="width: 45upx;height: 45upx;">
							</image>
							<view class="margin-left-xs" style="font-size: 26upx;">{{order.address}}</view>
						</view>
						<view class="" @click="bindphone(order.shopPhone)">
							<image src="../../../static/images/index/phone.png" style="width: 28upx;height:35upx;">
							</image>
						</view>
					</view>
					<view class="flex margin-top">
						<image :src="order.shopImg?order.shopImg:'../../../static/logo.png'"
							style="width: 140upx;height: 140upx;border-radius: 12upx;" mode="aspectFill"></image>
						<view class="margin-left-sm">
							<view>商家信息</view>
							<view class="margin-tb-xs">营业时间：工作日{{order.startTime}}—{{order.endTime}}</view>
							<view>商家品类：{{order.shopType}}</view>
						</view>
					</view>
				</view>

				<view class="tab">
					<view class="tabbox" :class="tanIndex==1?'active':''" @click="tabndex(1)">服务</view>
					<view class="tabbox" :class="tanIndex==2?'active':''" @click="tabndex(2)">评价</view>
				</view>
				<view v-if="tanIndex==1">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
						:refresher-enabled="refresherThreshold" @scrolltolower="lower" @scroll="scroll">
						<view class=" scroll-view-item" v-for="(item,index) in orderList" :key='index'
							@click="goOrder(item)">
							<image :src="item.homepageImg?item.homepageImg: '../../static/logo.png'"
								style="width: 200rpx;height: 200rpx;border-radius: 10rpx;" mode="aspectFill"></image>
							<view class="flex-sub margin-left text-white flex flex-direction justify-between">
								<view class="flex align-center">
									<image src="../../../static/images/qi.png" style="width: 80rpx;height: 40rpx;">
									</image>
									<!-- <view class="margin-right-xs u-line-1" -->
									<view class="margin-right-xs"
										style="display: inline-block;margin-left: 10rpx;width: 340rpx;">
										{{item.myLevel}}
									</view>
								</view>
								<view class="flex align-center justify-between radius flex-wrap" style="line-height: 34upx;">
									<!-- <view class="margin-right-xs"
										style="background: #FBEBF0;color: #FF2D01;padding: 10upx 16upx;"
										v-if="item.distance">
										距离{{item.distance}}km
									</view> -->
									<!-- <view v-for="(ite,ind) in item.gameName" :key="ind"
										style="margin:8rpx 5rpx 5rpx 0rpx;">
										<view style="background: #FBEBF0;color: #FF2D01;padding: 10upx 16upx;">
											{{ite}}
										</view>
									</view> -->
									<view style="margin:8rpx 5rpx 5rpx 0rpx;">
										<view style="background: #FBEBF0;color: #FF2D01;padding: 10upx 16upx;">
											{{item.serviceMethod === '1'?'上门服务':'到店服务'}}
										</view>
									</view>
									<view class="text-gray text-sm">
										已服务{{item.count}}次
									</view>
								</view>
								<view class="flex align-center justify-between" style="width: 100%;">
									<view
										style="color:#FF1200;font-size: 24rpx;font-family: PingFang-SC-Bold;letter-spacing: 2rpx;">
										<text
											style="font-size: 38rpx;font-weight: bold;">{{isVip? item.memberMoney :item.money}}</text>元/<text>{{item.unit}}</text>
									</view>
									<view class="xiad1">立即预约</view>
								</view>
							</view>
						</view>
						<empty v-if="orderList.length==0"></empty>
					</scroll-view>

				</view>
				<view class="margin-top-sm padding bg text-white radius u-skeleton-fillet" v-if="tanIndex==2">
					<view class="text-lg">用户评价</view>

					<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" @scrolltoupper="uppers"
						:refresher-enabled="refresherThreshold" @scrolltolower="lowers">
						<view class="margin-tb-sm" v-for="(item, index) in commentList" :key='index'>
							<view class="flex justify-between">
								<u-avatar :src="item.avatar" size="48"></u-avatar>
								<view class="flex-sub margin-left-sm" style="line-height: 46upx;">{{item.userName}}
								</view>
								<view class="flex">
									<u-icon v-for="ite in item.satisfactionFlag" :key='ite' color="#2087fe"
										name="star-fill"></u-icon>
								</view>
							</view>
							<view class="margin-top-sm">{{item.evaluateMessage}}</view>
							<view class="margin-top-xs flex flex-wrap">
								<view class="margin-right-xs margin-bottom-xs" v-for="(img,ind) in item.evaluateImg"
									:key="ind" @click="saveImg(item.evaluateImg,ind)">
									<image :src="img" mode="aspectFill" style="width: 200rpx;height: 200rpx;"></image>
								</view>
							</view>
						</view>
						<view v-if="commentList.length<=0" class="margin-top-sm"> 暂无评价</view>
					</scroll-view>

				</view>

			</view>

			<!-- <view @click="share" class="btn">分享好友</view> -->
		</view>
		<!-- <u-picker v-model="show" mode="time" :params="params" @confirm="statusChange"></u-picker> -->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		onShareAppMessage(res) {
			return {
				path: '/pages/index/index?invitation=' + this.invitationCode + '&shopUserId=' + this
				.shopUserId, //这是为了传参   onload(data){let id=data.id;} 
				title: this.order.shopName,
				imageUrl: this.order.shopImg
			}
		},
		onShareTimeline(res) {
			return {
				path: '/pages/index/index?invitation=' + this.invitationCode + '&shopUserId=' + this
				.shopUserId, //这是为了传参   onload(data){let id=data.id;} 
				title: this.order.shopName,
				imageUrl: this.order.shopImg
			}
		},
		data() {
			return {
				game: [],
				loading: true, // 是否显示骨架屏组件
				customStyle: {
					width: '400upx',
					color: '#FFFFFF',
					background: "#2087fe",
					border: 0
				},
				id: '',
				orderDet: {},
				page: 1,
				pages: 1,
				limit: 10,
				order: {},
				commentList: [],
				isFollow: false,
				myId: '',
				isVip: false,
				AUDIO: uni.createInnerAudioContext(),
				isPlay: false,
				show: false,
				params: {
					year: false,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
					timestamp: true
				},
				startTime: '',
				mobile: '',
				name: '',
				cityaddress: '',
				detailaddress: '',
				latitude: '',
				longitude: '',
				province: '',
				city: '',
				district: '',
				shopUserId: '',
				orderList: [],
				invitationCode: '',
				title: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				refresherThreshold: false,
				tanIndex: 1,
				token: ''
			}
		},
		onLoad(option) {
			// this.$queue.showLoading("加载中...");
			this.invitationCode = this.$queue.getData('invitationCode');
			this.shopUserId = option.shopUserId
			// #ifdef MP-WEIXIN
			if (option.scene) {
				const scene = decodeURIComponent(option.scene);
				this.$queue.setData('inviterCode', scene.split(',')[0]);
			}
			// #endif

			// 获取邀请码保存到本地
			if (option.invitation) {
				this.$queue.setData('inviterCode', option.invitation);
			}
			this.token = uni.getStorageSync('token')
			this.getDet()
			this.getorderlist()
			this.getOrderComment()
			this.myId = uni.getStorageSync('userId')
			this.isVip = uni.getStorageSync('isVIP')

		},
		onShow() {

		},

		onReady() {
			this.AUDIO.onEnded(function(res) {
				this.isPlay = false;
			});
		},
		methods: {
			tabndex(index) {
				this.tanIndex = index
				if (index == 1) {
					this.page = 1
					this.getorderlist()
				} else {
					this.page = 1
					this.getOrderComment()
				}
			},
			upper: function(e) {
				console.log(e, '下拉刷新')
				this.refresherThreshold = true
				this.page = 1
				this.getorderlist()
			},
			lower: function(e) {
				console.log(this.page + '---' + this.pages, '上拉加载')

				if (this.page < this.pages) {
					this.page += 1;
					this.getorderlist()
				}

			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			// 服务投诉
			goTousu(userId) {

				if (this.token) {
					uni.navigateTo({
						url: '/my/order/complain?byUserId=' + userId + '&platform=4&platformId=' + this.id
					});
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
			},
			//详情图片放大
			saveImg(imgs, index) {
				let that = this;
				let imgArr = imgs
				// //预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index]
				});
			},
			// 拨打电话
			bindphone(phone) {
				if (this.token) {
					let that = this
					uni.showModal({
						title: '提示',
						content: '是否拨打电话',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定', that.phone);
								uni.makePhoneCall({
									phoneNumber: phone //仅为示例
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}

			},
			// 一键导航
			bindGps(latitude, longitude, name) {
				if (this.token) {
					uni.openLocation({
						latitude: latitude - 0, //要去的纬度-地址       
						longitude: longitude - 0, //要去的经度-地址
						name: name, //地址名称
						address: name, //详细地址名称
						success: function() {
							console.log('导航成功');
						},
						fail: function(error) {
							console.log(error)
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}

			},
			// 详情
			getDet() {
				uni.showLoading({
					title: '加载中...',
					icon: 'none'
				});
				let data = {
					userId: this.shopUserId
				}
				this.$Request.get("/app/user/selectUserByIds", data).then(res => {
					uni.hideLoading();
					this.loading = false
					if (res.code == 0) {
						if (res.data && res.data.shopName) {
							this.order = res.data
							this.title = res.data.shopName
							uni.setNavigationBarTitle({
								title: res.data.shopName
							})
							if (this.order.addressImg) {
								this.order.addressImg = this.order.addressImg.split(",");
							}

							if (this.order.detailsImg) {
								this.order.detailsImg = this.order.detailsImg.split(",");
							}

						} else {
							uni.navigateBack()
						}


					}
				});

			},
			// 获取当前店铺列表数据
			getorderlist() {
				this.$Request.get("/app/orderTaking/selectMyReleases", {
					userId: this.shopUserId,
					page: this.page,
					limit: this.limit,
				}).then(res => {
					if (res.code == 0) {
						this.pages = res.data.totalPage
						for (var i = 0; i < res.data.list.length; i++) {
							res.data.list[i].gameName = res.data.list[i].gameName.split(",");
						}
						if (this.page == 1) {
							this.orderList = res.data.list
						} else {
							this.orderList = [...this.orderList, ...res.data.list]
						}
						this.refresherThreshold = false
					}
				});

			},
			uppers: function(e) {
				console.log(e, '下拉刷新')
				this.refresherThreshold = true
				this.page = 1
				this.getOrderComment()
			},
			lowers: function(e) {
				console.log(this.page + '---' + this.pages, '上拉加载')

				if (this.page < this.pages) {
					this.page += 1;
					this.getOrderComment()
				}

			},
			// 评论
			getOrderComment() {
				this.$Request.get("/app/evaluate/getUserEvaluate", {
					riderUserId: this.shopUserId,
					page: this.page,
					limit: this.limit
				}).then(res => {
					if (res.code == 0) {
						for (var i = 0; i < res.data.records.length; i++) {
							if (res.data.records[i].evaluateImg) {
								res.data.records[i].evaluateImg = res.data.records[i].evaluateImg.split(',')
							}
						}
						if (this.page == 1) {
							this.commentList = res.data.records
						} else {
							this.commentList = [...this.commentList, ...res.data.records]
						}
						this.refresherThreshold = false
						// this.commentList = [...this.commentList, ...res.data.list]
					}
				});
			},
			playVoice() {
				console.log(this.isPlay)
				this.AUDIO.src = this.order.voiceIntroduce;
				if (this.isPlay) {
					this.AUDIO.stop();
				} else {
					this.AUDIO.play();
				}
				this.isPlay = !this.isPlay;
			},
			// 跳转订单
			goOrder(e) {
				let userId = uni.getStorageSync('userId')
				if (userId) {
					uni.navigateTo({
						url: '/pages/index/game/order?id=' + e.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}

			},
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getorderlist()
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getorderlist()
		},

	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}

	.bgs {
		background-color: #F7F7F7;
	}

	.bg {
		background-color: #FFFFFF;
	}

	.line_s {
		display: inline-flex;
		width: 14rpx;
		height: 14rpx;
		background: #1AD566;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.line_x {
		display: inline-flex;
		width: 14rpx;
		height: 14rpx;
		background: #000000;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.u-size-default {
		background: #557EFD !important;
	}

	.addbox {
		width: 600upx;
	}

	.btn {
		width: 686upx;
		height: 88upx;
		margin: 0 auto;
		background: #557EFD;
		border-radius: 49upx;
		line-height: 88upx;
		text-align: center;
		color: #FFFFFF;
		position: fixed;
		bottom: 30upx;
		left: 0;
		right: 0;
	}

	.scroll-Y {
		height: 700rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 24rpx;
	}

	.scroll-view-item {
		/* flex justify-between margin-top-xs bg padding-sm radius */
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
		padding: 20rpx;
		border-radius: 12rpx;
		background: #FFFFFF;
		/* height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx; */
	}

	.xiad1 {
		/* width: 200rpx; */
		/* height: 60upx; */
		/* margin: 0 auto; */
		background: #557EFD;
		border-radius: 49upx;
		/* line-height: 60upx; */
		text-align: center;
		color: #FFFFFF;
		padding: 12rpx 30rpx;

	}

	.tab {
		display: flex;
		align-items: center;
		background: #FFFFFF;
		margin-top: 30rpx;
		border-radius: 24rpx;

	}

	.tabbox {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
	}

	.active {
		background: #557EFD;
		color: #FFFFFF;
		border-radius: 24rpx;
	}
</style>